<!DOCTYPE html>
<html>
<haad>
	<meta charset="utf-8" />
	<title>分期总图查看</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</haad>

<body>

<div id="titleBar" class="stageMap-titleBar">
	分期总图:<span> 司马台长城源著-一期</span>
</div>
<div id="type" class="stageMap-type">
	<div class="stageMap-type-box">
		<input type="checkbox" value="1"/>组团
	</div>
	<div class="stageMap-type-box">
		<input type="checkbox" value="1"/>楼栋
	</div>
	<div class="stageMap-type-box">
		<input type="checkbox" value="1"/>楼栋名称
	</div>
</div>
<div id="green" class="stageMap-green">
	<div class="stageMap-green-title fl">楼栋去化率图例:</div>
	<div class="stageMap-green-box">
		<i></i>
		<label>0-20%</label>
	</div>
	<div class="stageMap-green-box">
		<i></i>
		<label>0-20%</label>
	</div>
</div>

<div id="stageMap" style="overflow: hidden;margin-top:0px;background-color: #000"></div>

<div id="mask" class="mask">
	<div class="mask-opacity"></div>
	<div class="mask-text">正再载入中....</div>
</div>

</body>
</html>
<script type="text/javascript" src="js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="js/wGraph.js"></script>
<script type="text/javascript">
//upLoader.upload(document.getElementById("file"),"/restful/upload");

var App = {
	data:'<path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#FFFF00" stroke-width="2" stroke-dasharray="none" fill="#FFFF00" stroke-opacity="0.7" fill-opacity="0.3" d="M 289 363 L 289 363 550 570 284 735 256 473 256 473Z"></path><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#FFFF00" stroke-width="2" stroke-dasharray="none" fill="#ffff00" stroke-opacity="0.7" fill-opacity="0.3" d="M 26 269 L 26 269 229 297 173 467 26 393 31 290 31 290Z"></path><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#FFFF00" stroke-width="2" stroke-dasharray="none" fill="#ffff00" stroke-opacity="0.7" fill-opacity="0.3" d="M 23 516 L 23 516 169 520 134 699 35 651 12 570 12 570Z"></path>',
	init : function(){
		this.data = localStorage.getItem("svg");
		this.initGraph();
		//this.ajaxLoadData();
		this.loadData(this.data);
	},
	ajaxLoadData :function(){
		var th = this;
		th.loadData(this.data);
		$.ajax({
			url:"",
			type:"get",
			success:function(data){
				th.loadData(th.data);
			}
		});
		
	},
	loadData : function(data){
		wGraph.setSvgData(data);
	},
	initGraph : function(){
		wGraph.init({
			container:document.getElementById("stageMap"),
			//src : "uploadFiles/3.jpg",
			height : document.documentElement.clientHeight-125,
			width : document.documentElement.clientWidth,
			isEdit : false,
			onimageinit : function(){
				//mask.style.display = "block";
			},
			onimageload : function(){
				setTimeout(function(){
					mask.style.display = "none";
				},300);
				
			}
		});		
	},
	bindEvent : function(){

	}
};App.init();


/*
var svg = document.getElementsByTagName("svg")[0];
var g = document.getElementById("container");
svg.onmousedown = function(e){
	g.style.transform = "translate(100px,100px)";

	console.log(svg.parentNode.offsetTop);
}

document.onclick = function(e){
	g.style.transform = "scale(2)";
}
*/
</script>
